<template>
    <div>
        <div>
            <rui-page :defines="defines">
                <rui-table :defineId="'groupSceneInfo'"
                           :slots="[{key:'action',slot:'action'}]"
                           :select="false"
                           @loadDatas="getInfo"
                           ref="groupSceneTable">
                    <template slot="action" slot-scope="{ row }">
                        <div>
                            <Button @click="update(row)" size="small" type="primary">编辑</Button>
                        </div>
                    </template>
                </rui-table>
            </rui-page>
        </div>
        <div>
            <Modal :title="groupSceneTitle" v-model="groupSceneModalVisible" :mask-closable='false' :width="300">
                <Form ref="groupSceneForm" :model="groupSceneForm" :label-width="62" style="margin-top: 25px">
                    <Form-item label="所属部门" prop="departmentTitle">
                        <Poptip trigger="click" placement="right" title="选择部门" width="250">
                            <div style="display:flex;">
                                <Input v-model="groupSceneForm.departmentTitle" readonly style="margin-right:10px;width: 120px"/>
                                <Button icon="md-trash" @click="clearSelectDep">清空已选</Button>
                            </div>
                            <div slot="content" class="tree-bar">
                                <Input v-model="searchKey" suffix="ios-search" @on-change="searchDp" placeholder="输入部门名搜索"/>
                                <Tree :data="dataDep" :load-data="loadDataTree" @on-select-change="selectTree"></Tree>
                                <Spin size="large" fix v-if="dpLoading"></Spin>
                            </div>
                        </Poptip>
                    </Form-item>
                </Form>
                <div slot="footer">
                    <Button type="text" @click="cancel">取消</Button>
                    <Button type="primary" @click="submit">提交</Button>
                </div>
            </Modal>
        </div>
    </div>
</template>
<script>
    import {getGroupSceneInfo,updateGroupScene} from "@/projects/afs-core-business/api/afs-case/parameter-rules/groupScene";
    import {
        initDepartment,
        loadDepartment,
        searchDepartment} from "@/projects/basic/api/admin/department";
    let groupSceneInfo = [
        {
            key: 'greatWallServiceId',
            title: '流程场景ID',
            align: 'center',
        },
        {
            key: 'greatWallServiceName',
            title: '流程名',
            align: 'center',
        },
        {
            key: 'serviceName',
            title: '服务名',
            align: 'center',
        },
        {
            key: 'afsFlowKey',
            title: 'afs内部映射key',
            align: 'center',
        },
        {
            key: 'deptName',
            title: '部门',
            align: 'center',
        },
        {
            key: 'action',
            title: '操作',
            width: 200,
            align: 'center',
        }
    ]
    export default {
        name: "groupScene",
        data(){
            return{
                groupSceneTitle:"场景编辑",
                groupSceneModalVisible:false,
                groupSceneForm:{
                    greatWallServiceId:"",
                    departmentId: "",
                    departmentTitle: "",
                },
                searchForm:{
                    pageNumber: 1,
                    pageSize: 10,
                    greatWallServiceId:"",
                    greatWallServiceName:"",
                },
                department: [],
                dataDep: [],
                dpLoading: false, // 部门树加载
                searchKey: "",
            }
        },
        methods: {
            init(){
                this.getInfo(1,10);
                this.initDepartmentData();
                this.initDepartmentTreeData();
            },
            getInfo(pageNumber, pageSize){
                this.searchForm.pageNumber = pageNumber;
                this.searchForm.pageSize = pageSize;
                getGroupSceneInfo(this.searchForm).then(res=>{
                    if(res.code === "0000"){
                        let {records, total} = res.data.data;
                        this.$refs.groupSceneTable.updateTableData(records, total);
                    }
                })
            },
            getList() {
                getGroupSceneInfo(this.searchForm).then(res => {
                    if (res.code === "0000") {
                        let {records, total} = res.data.data;
                        this.$refs.groupSceneTable.updateTableData(records, total);
                    }
                });
            },
            cancel(){
                this.groupSceneModalVisible = false;
            },
            update(v){
                this.groupSceneForm.greatWallServiceId = v.greatWallServiceId;
                this.$refs.groupSceneForm.resetFields();
                this.groupSceneForm.departmentId = v.deptId;
                this.groupSceneForm.departmentTitle = v.deptName;
                this.groupSceneModalVisible = true;
            },
            submit(){
                updateGroupScene(this.groupSceneForm).then(res=>{
                    if(res.code === "0000"){
                        this.$Message.success("修改成功");
                        this.groupSceneModalVisible = false;
                        this.getList();
                    }
                })
            },
            initDepartmentTreeData() {
                initDepartment().then(res => {
                    if (res.code === "0000") {
                        res.data.forEach(function (e) {
                            if (e.isParent) {
                                e.loading = false;
                                e.children = [];
                            }
                            if (e.status === '0') {
                                e.title = "[已禁用] " + e.title;
                                e.disabled = true;
                            }
                        });
                        this.dataDep = res.data;
                    }
                });
            },
            initDepartmentData() {
                initDepartment().then(res => {
                    if (res.code === "0000") {
                        res.data.forEach(function (e) {
                            if (e.isParent) {
                                e.value = e.id;
                                e.label = e.title;
                                e.loading = false;
                                e.children = [];
                            } else {
                                e.value = e.id;
                                e.label = e.title;
                            }
                            if (e.status === '0') {
                                e.label = "[已禁用] " + e.label;
                                e.disabled = true;
                            }
                        });
                        this.department = res.data;
                    }
                });
            },
            loadDataTree(item, callback) {
                loadDepartment(item.id).then(res => {
                    if (res.code === "0000") {
                        res.data.forEach(function (e) {
                            if (e.isParent) {
                                e.loading = false;
                                e.children = [];
                            }
                            if (e.status === '0') {
                                e.title = "[已禁用] " + e.title;
                                e.disabled = true;
                            }
                        });
                        callback(res.data);
                    }
                });
            },
            selectTree(v) {
                if (v.length > 0) {
                    // 转换null为""
                    for (let attr in v[0]) {
                        if (v[0][attr] === null) {
                            v[0][attr] = "";
                        }
                    }
                    let str = JSON.stringify(v[0]);
                    let data = JSON.parse(str);
                    this.groupSceneForm.deptId = data.id;
                    this.groupSceneForm.departmentTitle = data.title;
                }
            },
            searchDp() {
                // 搜索部门
                if (this.searchKey) {
                    this.dpLoading = true;
                    searchDepartment({title: this.searchKey}).then(res => {
                        this.dpLoading = false;
                        if (res.code === "0000") {
                            res.data.forEach(function (e) {
                                if (e.status === '0') {
                                    e.title = "[已禁用] " + e.title;
                                    e.disabled = true;
                                }
                            });
                            this.dataDep = res.data;
                        }
                    });
                } else {
                    this.initDepartmentTreeData();
                }
            },
            clearSelectDep() {
                this.groupSceneForm.deptId = "";
                this.groupSceneForm.departmentTitle = "";
            },
        },
        computed: {
            defines() {
                return [
                    {
                        id: 'groupSceneInfo',
                        fields: groupSceneInfo
                    }
                ]
            }
        },
        //初始化
        mounted() {
            this.init();
        }
    }
</script>
